<template>
  <div class="category">
    <swiper  dots-position="center"  class="swiper" >
        <swiper-item v-for="(cate,index) in cates" :key="index">
          <a class="item" v-for="(cates,i) in cate" :href="cates.url" :key="i">
            <img :src="cates.icon" alt="">
            <p>{{cates.name}}</p>
          </a>
        </swiper-item>
    </swiper>
  </div>
</template>

<script>
import {Swiper, SwiperItem} from 'vux'
export default {
  components: {
    Swiper,
    SwiperItem
  },
  created () {
    this.$http.get('static/json/categories.json').then(response => {
      console.log(response.data)
      this.cates = response.data
    })
  },
  data () {
    return {
      cates: []
    }
  }
}
</script>

<style lang='less' scoped>
.category {
  margin-top: 0.2415rem;
  overflow-y: hidden;
  .swiper {
    margin: 0 0.2657rem;
    height: 4.72rem;
    text-align: center;
    .item {
      float: left;
      width: 20%;
      text-align: center;
      height: 45%;
      img {
        width: 1.1916rem;
        height: 1.1916rem;
      }
      p {
        color: #000;
        font-size: .16rem /* 12/75 */;
      }
    }
  }
}
</style>
